<template>
  <!-- account -->
  <div class="account-box">
    <heading-title title="Create New Customer Account" />
    <div class="account-container">
      <span>{{ "FIRST NAME" }}</span>
      <div>
        <input v-model="info.firstname" type="text" />
        <p v-show="firstShow">{{ "This is a required field." }}</p>
      </div>
      <span>{{ "LAST NAME" }}</span>
      <div>
        <input v-model="info.lastname" type="text" />
        <p v-show="lastShow">{{ "This is a required field." }}</p>
      </div>
      <div>
        <el-checkbox v-model="info.checked">{{
          "SIGN UP FOR NEWSLETTER"
        }}</el-checkbox>
      </div>
      <span>EMAIL</span>
      <div>
        <input v-model="info.email" type="text" />
        <p v-show="emailShow">{{ "This is a required field." }}</p>
      </div>
      <span>PASSWORD</span>
      <div>
        <input v-model="info.password" type="password" />
        <p class="tips">{{ "Password Strength: No Password" }}</p>
        <p v-show="passwordShow">{{ "This is a required field." }}</p>
      </div>
      <span>CONFIRM PASSWORD</span>
      <div>
        <input v-model="info.confirm_password" type="password" />
        <p v-show="confirmShow">{{ "This is a required field." }}</p>
      </div>
      <div class="btn" @click="submit">
        {{ "Create an Account" }}
      </div>
      <p @click="$router.push('/login')" class="forget-text">{{ "BACK" }}</p>
    </div>
  </div>
</template>

<script>
import { integrationToken, customers } from "@/api/rest_api";
export default {
  data() {
    return {
      info: {
        // checked: false
      },
      firstShow: false,
      lastShow: false,
      emailShow: false,
      passwordShow: false,
      confirmShow: false
    };
  },

  components: {
    HeadingTitle: () => import("_c/HeadingTitle")
  },

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    // 登录
    async submit() {
      if (!this.info.firstname) this.firstShow = true;
      else this.firstShow = false;
      if (!this.info.lastname) this.lastShow = true;
      else this.lastShow = false;
      if (!this.info.email) this.emailShow = true;
      else this.emailShow = false;
      if (!this.info.password) this.passwordShow = true;
      else this.passwordShow = false;
      if (!this.info.confirm_password) this.confirmShow = true;
      else this.confirmShow = false;
      if (
        this.firstShow ||
        this.lastShow ||
        this.emailShow ||
        this.passwordShow ||
        this.confirmShow
      )
        return;
      let { data } = await this.getAdminToken();
      if (!data) return;
      let params = JSON.stringify({
        customer: {
          lastname: this.info.lastname,
          firstname: this.info.firstname,
          email: this.info.email,
          addresses: [
            {
              defaultBilling: true,
              defaultShipping: true,
              firstname: "Jane",
              lastname: "Doe",
              region: { regionCode: "NY", regionId: 43, region: "New York" },
              countryId: "US",
              postcode: "11501",
              city: "Mineola",
              street: ["160 1st St."],
              telephone: "516-555-1111"
            }
          ]
        },
        password: this.info.password
      });
      let { error } = await customers(params, data);
      if (error) return;
      this.$message.success("Create account success");
			this.$router.push('/login')
    },
    // 获取adminToken
    async getAdminToken() {
      let data = JSON.stringify({ username: "admin", password: "admin123456" });
      let { error, res } = await integrationToken(data);
      if (error) return { data: false };
      return { data: res };
    }
  },

  watch: {}
};
</script>
<style lang="scss" scoped>
.account-box {
  .account-container {
    width: 312px;
    margin: 0 auto 40px;
    span {
      font-size: 12px;
      color: #969696;
      &::after {
        content: "*";
        padding-left: 2px;
        color: #969696;
        font-size: 12px;
        margin: 0 0 0 5px;
      }
    }
    input {
      width: 100%;
      height: 30px;
      border: 0;
      border-bottom: 1px solid #e2e2e2;
      margin-bottom: 10px;
      outline: 0;
      font-size: 14px;
      color: #000;
      padding: 5px 0;
      border-radius: 5px;
      &:focus {
        border-bottom-color: #1a1a1a;
      }
    }
    p {
      font-size: 12px;
      color: #e02b27;
      margin: 0;
      &.tips {
        color: #1a1a1a;
        font-size: 14px;
        margin-bottom: 10px;
      }
    }
    & > div {
      margin-bottom: 29px;
    }
    p.forget-text {
      color: #000;
      text-align: center;
      cursor: pointer;
    }
    div.btn {
      width: 100%;
      height: 50px;
      line-height: 50px;
      background: #000;
      border-color: #000;
      color: #fff;
      font-weight: 500;
      text-align: center;
      cursor: pointer;
      margin-bottom: 15px;
    }
  }
}
</style>
